<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button id="btn">点我一下</button>
    <button id="btn2">点我一下</button>

    <script>
        /* 
            事件(event)
                - 事件就是用户玉页面之间发生的交互行为
                    比如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开按钮……
                - 可以通过为事件绑定响应函数(回调函数),来完成和用户之间的交互
                - 事件处理函数(event handler)
                    - 函数,用于处理事件
                    - 当事件发生时,会自动调用这个函数
                    - 函数的参数,会自动传入事件对象(event object)
                    - 函数的返回值,不会被使用
        */

        // document.getElementById("btn").onclick = function(event) {
        //     const div = document.createElement("div"); // 创建 div 元素
        //     div.innerHTML = "点击了";                  // 设置内容
        //     document.body.appendChild(div);            // 添加到页面中
        // }

        // document.getElementById("btn").onclick = function () {
        //     const result = confirm("你确定要继续吗？");
        //     if (result) {
        //         alert("你点击了确定");
        //     } else {
        //         alert("你点击了取消");
        //     }
        // };

        document.getElementById("btn").onclick = function () {
            const name = prompt("请输入你的名字：");
            if (name) {
                alert("你好，" + name + "！");
            } else {
                alert("你没有输入任何内容");
            }
        };

        const btn2 = document.getElementById("btn2");

        btn2.addEventListener("click", function () {
            alert("你点击了按钮2");
        });

    </script>
</body>

</html>